<template>
  <!-- 用户修改自身信息组件 -->
  <div class="userCenterSetting">
    <form @submit.prevent="settingState($event)">
     <div class="form-group">
        <label for="user">用户名</label>
        <input type="text" class="form-control" id="user" :value="localDataComputed.username">
      </div>
      <span class="mr-4">性别</span>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="sex" id="man" value="man" :checked="getSexflagMan">
        <label class="form-check-label" for="man">男</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="sex" id="woman" value="woman" :checked="getSexflagWoMan">
        <label class="form-check-label" for="woman">女</label>
      </div>
      <div class="form-group mt-2">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" id="email" :value="localDataComputed.email">
      </div>
      <div class="form-group">
        <label for="userdesc">签名</label>
        <textarea class="form-control" id="userdesc" rows="3" :value="localDataComputed.userdesc"></textarea>
      </div>
      <div class="d-flex justify-content-between">
        <button type="submit" class="btn btn-secondary mb-2">提交</button>
      </div>
    </form>

  </div>
</template>

<script>
  export default {
    name: 'UserCenterSetting',
    data () {
      return {
        sexFlagMan: '',
        sexFlagWoMan: '',
        localData: JSON.parse(localStorage.getItem('userInformation')), //用户信息
        getUserData: {
          id: JSON.parse(localStorage.getItem('userInformation')).id,
          table: 'user'
        }
      }
    },
    methods: {
      settingState(event) {
        // 判断设置用户提交信息
        let sexFlag;
        let email;
        if (event.target[1].checked) {
          sexFlag = event.target[1].value;
        }
        if (event.target[2].checked) {
          sexFlag = event.target[2].value;
        }
        if (event.target[3].value === '') {
          email = 'NULL'
        } else {
          email = event.target[3].value
        }

        let setChangeUserData = {
          username: event.target[0].value,
          sex: sexFlag,
          email,
          userdesc: event.target[4].value,
          table: 'user',
          id: this.localData.id
        }

        // 提交用户自身更新后的数据
        this.$store.dispatch('asynSetUserData', setChangeUserData);

        setTimeout(() => {
           if (this.$store.state.setUserData === 'success') {
            // 请求用户数据
            this.$store.dispatch('asynHasIdGetUser', this.getUserData);
            setTimeout(() => {
              if (this.$store.state.getChangeUserData) {
                // 成功后改变本地用户数据
                localStorage.setItem('userInformation', JSON.stringify(this.$store.state.getChangeUserData));
                alert('修改成功');
                window.location.reload();
              }
            }, 300);
          }
        }, 1000);
      }
    },
    computed: {
      // 判断性别选择
      getSexflagMan() {
        return this.localData.sex == 'man' ? this.sexFlagMan = true : this.sexFlagMan = false;
      },
      // 判断性别选择
      getSexflagWoMan() {
        return this.localData.sex == 'woman' ? this.sexFlagWoMan = true : this.sexFlagWoMan = false;
      },
      // 渲染用户数据
      localDataComputed() {
        return JSON.parse(localStorage.getItem('userInformation'));
      }
    },
    // 注入组件刷新
    inject: ['reload'],
    // 组件前置导航守卫
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 进入路由后更改当前本地用户的数据，并且刷新
        if (localStorage.getItem('userInformation')) {
          vm.$store.dispatch('asynHasIdGetUser', vm.getUserData);
          setTimeout(() => {
            if (vm.$store.state.getChangeUserData) {
              localStorage.setItem('userInformation', JSON.stringify(vm.$store.state.getChangeUserData));
              vm.reload();
            }
          }, 300);
        }
      });
    }
  }

</script>

<style scoped>

</style>